<template>
  <div style="overflow: auto">
    <h1 class="h">ScrollReveal 演示demo</h1>

    <!-- <h1 class="h">ScrollReveal 演示demo</h1>
    <div class="item" v-for="item in 10" :key="item">{{ item }}sdfsd</div>
    <div class="item" v-for="item in 10" :key="item">{{ item }}sdfsd</div>
    <div style="padding: 10px 100px">
      <h1 class="headline load-hidden">Widget Inc.</h1>
    </div>

    <div class="item" v-for="item in 30" :key="item">{{ item }}sdfsd</div>
    <p class="tagline">
      The perfect widgets.
      <span class="punchline">Forever.</span>
    </p> -->
    <router-view></router-view>
  </div>
</template>

<script setup></script>

<style>
.h {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background-color: #0de1ac;
  text-align: center;
}
.item {
  width: 100%;
  height: 60px;
  text-align: center;
  /* background-color: lightgreen; */
  border: 1px solid #cf0808;
  border-radius: 8px;
  margin: 10px auto;
  font-size: 28px;
  flex: 1 1 0;
}
</style>
